<template>
	<div>
		<div class="font-size18 font-bold margin-bottom20 color252630">考点管理</div>
		<div class="container">
			<div class="handle-box row-me row-center">
				<el-input v-model="query.title" placeholder="请输入考点标题" class="handle-input margin-right20"></el-input>
				<el-select placeholder="请选择考点分类" filterable v-model="query.categoryId" clearable
					class="handle-input margin-right20">
					<el-option v-for="(item,index) in examCategotyData" :key="item.id" :label="item.name"
						:value="item.id"></el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch" class="mr10">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</div>
			<div class="margin-bottom20">
				<el-button type="primary" @click="addExamSite({})">新建</el-button>
				<el-button type="primary" @click="categoryVisible=true">分类管理</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable"
				header-cell-class-name="table-header" @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="55" align="center">
					<template slot-scope="scope">
						{{scope.$index + 1}}
					</template>
				</el-table-column>
				<el-table-column prop="id" label="ID" align="center" width="88"></el-table-column>
				<el-table-column prop="title" label="标题" align="center" width="200"></el-table-column>
				<el-table-column prop="categoryName" label="分类" align="center" width="200"></el-table-column>
				<el-table-column label="内容" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<span v-html="scope.row.content2"></span>
					</template>
				</el-table-column>
				<el-table-column prop="key" label="记忆口诀" align="center" width="200">
					<template slot-scope="scope">
						<span class="line1">{{scope.row.key}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序" align="center" width="80"></el-table-column>
				<el-table-column label="查看相关题目" align="center" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="clickTopic(scope.row)">查看({{scope.row.pointsNum||0}})</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="addExamSite(scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 新建考点设置 -->
		<el-dialog :title="examSiteForm.id?'编辑考点':'新建考点'" :visible.sync="examSiteVisible" width="60%">
			<el-form :model="examSiteForm" :rules="examSiteRules" ref="examForm" label-width="80px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="examSiteForm.title" class="width400" placeholder="请输入考点标题"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="examSiteForm.sort" class="width400" placeholder="请输入排序"></el-input>
				</el-form-item>
				<el-form-item label="学科">
					<el-select v-model="examSiteForm.appid" class="width400">
						<el-option v-for="(item,index) in minAppList" :key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="分类">
					<el-cascader ref="cascader" class="width400" v-model="examSiteForm.categoryId" :props="props"
						:show-all-levels="false" placeholder="请选择分类">
					</el-cascader>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<div class="row-me">
						<vue-ueditor-wrap v-model="examSiteForm.content" editor-id="editor" :config="editorConfig"
							:editorDependencies="['ueditor.config.js','ueditor.all.js']" style="width: 80%;" />
					</div>
				</el-form-item>
				<el-form-item label="记忆口诀" prop="remember">
					<el-input type="textarea" style="width: 980px;" rows="6" placeholder="请输入记忆口诀"
						v-model="examSiteForm.key"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="examSiteVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('examForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 分类管理 -->
		<el-dialog title="分类管理" :visible.sync="categoryVisible" width="40%" @close="getExamCategoty">
			<el-button type="primary" class="margin-bottom20" @click="addCategory">新增</el-button>
			<el-table :data="pointsCategoryData" border class="table" header-cell-class-name="table-header">
				<el-table-column label="分类名称" prop="name" align="center"></el-table-column>
				<el-table-column label="子分类" prop="childCategory" align="center">
					<template slot-scope="scope">
						<div class="line1">{{scope.row.childCategory}}</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="230" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="itemCategory(scope.row)">子分类管理
						</el-button>
						<el-button type="text" icon="el-icon-edit" @click="addCategory(scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="delCategory( scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange2" :current-page="pointsCategoryParams.pageNumber" :total="pointsCategoryTotal"
					@current-change="handlePageChange2"></el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="categoryVisible=false">关 闭</el-button>
			</span>
		</el-dialog>

		<!-- 子分类管理 -->
		<el-dialog title="子分类管理" :visible.sync="itemCategoryVisible" width="40%">
			<el-button type="primary" class="margin-bottom20" @click="addChildCategory">新增</el-button>
			<el-table :data="itemCategoryData" border class="table" header-cell-class-name="table-header">
				<el-table-column label="分类名称" prop="name" align="center"></el-table-column>
				<el-table-column label="操作" width="230" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="addChildCategory(scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="delChildCategory( scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange3" :current-page="itemCategoryParams.pageNumber" :total="itemCategoryTotal"
					@current-change="handlePageChange3"></el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="itemCategoryVisible=false">关 闭</el-button>
			</span>
		</el-dialog>

		<el-dialog :title="categoryTitle" :visible.sync="categoryExamVisible" width="30%">
			<el-form :model="categotyForm" label-width="80px">
				<el-form-item label="分类名称" prop="name">
					<el-input v-model="categotyForm.name" class="width400" placeholder="请输入分类名称"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="categotyForm.sort" class="width400" placeholder="请输入排序"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="categoryExamVisible = false">取 消</el-button>
				<el-button type="primary" @click="categorySave">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog :title="childCategoryTitle" :visible.sync="childCategoryExamVisible" width="30%">
			<el-form :model="itemCategoryForm" label-width="100px">
				<el-form-item label="子分类名称" prop="name">
					<el-input v-model="itemCategoryForm.name" class="width400" placeholder="请输入分类名称"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="itemCategoryForm.sort" class="width400" placeholder="请输入排序"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="childCategoryExamVisible = false">取 消</el-button>
				<el-button type="primary" @click="ChildCategorySave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 相关题目 -->
		<el-dialog title="相关题目" :visible.sync="topicVisible" width="60%">
			<el-table :data="topicData" border class="table" header-cell-class-name="table-header-style">
				<el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
				<el-table-column label="题目ID" prop="id" align="center" width="100"></el-table-column>
				<el-table-column prop="title" label="题目" align="center"></el-table-column>
				<el-table-column prop="type.name" label="题型" align="center" width="100"></el-table-column>
				<el-table-column label="分类" align="center" width="200">
					<template slot-scope="{row}">
						<span
							v-if="row.tails">{{row.tails.category1||""}}/{{row.tails.category2||""}}/{{row.tails.category3||""}}</span>
					</template>
				</el-table-column>
				<el-table-column width="100" label="属性" align="center">
					<template slot-scope="{row}">
						<span v-if="row.properType==1">普通题</span>
						<span v-else-if="row.properType==2">作废题</span>
						<span v-else-if="row.properType==3">争议题</span>
						<span v-else-if="row.properType==4">重复题</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleTopicSizeChange" :current-page="topicQuery.pageNumber" :total="topicPageTotal"
					@current-change="handleTopicPageChange"></el-pagination>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="topicVisible=false">关 闭</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		name: 'basetable',
		components: {
			imgLibrary
		},
		data() {
			let that = this
			return {
				loading: true,
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				optionNoArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'], //选择题题号数组
				userVisible: true,
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {
					id: '',
					status: '',
					days: ''
				},
				idx: -1,
				id: -1,
				Authorization: {
					'Authorization': localStorage.getItem('token')
				},
				token: localStorage.getItem('token'),
				hintSetVisible: false,
				hintSetObj: {
					status: true
				},
				hintTableData: [{
					name: "语文",
					content: "测试测试测试"
				}],
				createHintVisible: false,
				examSiteRules: {
					title: {
						required: true,
						message: '请输入考点标题',
						trigger: 'blur'
					},
					content: {
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}
				},
				examSiteVisible: false,
				examSiteForm: {},
				minAppList: [],
				categoryVisible: false,
				pointsCategoryParams: {
					pageNumber: 1,
					pageSize: 30
				},
				pointsCategoryTotal: 0,
				pointsCategoryData: [],
				title: '',
				categotyForm: {

				},
				categoryTitle: '',
				categoryExamVisible: false,
				examCategotyData: [],
				itemCategoryVisible: false,
				itemCategoryForm: {},
				itemCategoryParams: {
					pageNumber: 1,
					pageSize: 30
				},
				itemCategoryTotal: 0,
				itemCategoryData: [],
				childCategoryTitle: '',
				childCategoryExamVisible: false,
				props: {
					emitPath: false,
					lazy: true,
					label: 'name',
					value: 'id',
					lazyLoad: this.lazyLoad,
					checkStrictly: true,
				},
				topicVisible: false,
				topicData: [],
				topicQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				topicPageTotal: 0,
				editor: null,
				editorConfig: {
					serverUrl: process.env.BASE_API + "/file/upload",
					UEDITOR_HOME_URL: '/static/UEditor/',
					toolbarCallback: function(cmd, editor) {
						switch (cmd) {
							case 'insertimage':
								that.editor = editor
								that.$refs.imgLibrary.show()
								return true;
						}
					}
				},
			};
		},
		created() {
			this.getMinApp()
			this.getData();
			this.examSiteForm.appid = JSON.parse(localStorage.getItem("appid"))
			this.getPageQueryPointsCategory()
			this.getExamCategoty()
		},
		methods: {
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			handleImgOk(data) {
				this.editor.execCommand('insertimage', {
					src: data,
					width: '200',
				});
				this.$forceUpdate()
			},
			//相关题目分页
			handleTopicSizeChange(val) {
				this.topicQuery.pageSize = val
				this.getTopicData()
			},
			handleTopicPageChange(val) {
				this.topicQuery.pageNumber = val
				this.getTopicData()
			},
			//查看相关题目
			clickTopic(row) {
				this.topicQuery.pointsId = row.id
				this.getTopicData()
				this.topicVisible = true
			},
			async getTopicData() {
				const res = await this.$get('/admin/questionPoints/pageChildQuestions', this.topicQuery)
				if (res.code == 1000) {
					this.topicData = res.data.list
					this.topicPageTotal = res.data.totalRow
				}
			},
			async lazyLoad(node, resolve) {
				if (node.level == 0) {
					resolve(this.examCategotyData);
				} else {
					const res = await this.$get('/admin/questionPoints/pageQueryPointsCategory', {
						parentId: node.data.id
					})
					if (res.data.list.length != 0) {
						resolve(res.data.list);
					} else {
						resolve(undefined);
					}
				}
			},
			// 新建子分类管理
			addChildCategory(row) {
				if (row.id) {
					this.childCategoryTitle = '编辑'
					this.itemCategoryForm = row
				} else {
					this.childCategoryTitle = '新增'
					this.itemCategoryForm = {
						parentId: this.itemCategoryForm.parentId
					}
				}
				this.childCategoryExamVisible = true
			},
			// 考点子分类列表
			async getchildPageQueryPointsCategory() {
				const res = await this.$get('/admin/questionPoints/pageQueryPointsCategory', this.itemCategoryParams)
				this.itemCategoryData = res.data.list
				this.itemCategoryTotal = res.data.totalRow
			},
			itemCategory(row) {
				this.itemCategoryParams.parentId = row.id
				this.itemCategoryForm.parentId = row.id
				this.getchildPageQueryPointsCategory()
				this.itemCategoryVisible = true
			},
			async getExamCategoty() {
				const res = await this.$get('/admin/questionPoints/pageQueryPointsCategory', {
					pageNumber: 1,
					pageSize: 1000000
				})
				this.examCategotyData = res.data.list
			},
			async ChildCategorySave() {
				if (this.$.isEmpty(this.itemCategoryForm.name)) {
					this.$message.warning('请输入的分类名称!')
					return
				}
				const res = await this.$post('/admin/questionPoints/saveCategory', this.itemCategoryForm)
				this.$message.success('操作成功')
				this.getchildPageQueryPointsCategory()
				this.getPageQueryPointsCategory()
				this.childCategoryExamVisible = false
			},
			async categorySave() {
				if (this.$.isEmpty(this.categotyForm.name)) {
					this.$message.warning('请输入的分类名称!')
					return
				}
				const res = await this.$post('/admin/questionPoints/saveCategory', this.categotyForm)
				this.$message.success('操作成功')
				this.getPageQueryPointsCategory()
				this.categoryExamVisible = false
			},
			async delChildCategory(row) {
				const res = await this.$post('/admin/questionPoints/deletePointsCategory', {
					id: row.id,
				})
				this.$message.success('删除成功')
				this.getchildPageQueryPointsCategory()
			},
			async delCategory(row) {
				const res = await this.$post('/admin/questionPoints/deletePointsCategory', {
					id: row.id
				})
				this.$message.success('删除成功')
				this.getPageQueryPointsCategory()
			},
			// 新建分类管理
			addCategory(row) {
				if (row.id) {
					this.categoryTitle = '编辑'
					this.categotyForm = row
				} else {
					this.categoryTitle = '新增'
					this.categotyForm = {}
				}
				this.categoryExamVisible = true
			},
			// 考点分类列表
			async getPageQueryPointsCategory() {
				const res = await this.$get('/admin/questionPoints/pageQueryPointsCategory', this
					.pointsCategoryParams)
				if (res.code == 1000) {
					this.pointsCategoryData = res.data.list
					this.pointsCategoryTotal = res.data.totalRow
					let childCategoryStr = ''
					for (let item of this.pointsCategoryData) {
						if (item.questionPointsCategories && item.questionPointsCategories != 0) {
							childCategoryStr = Array.from(item.questionPointsCategories, ({
								name
							}) => name).toString()
						} else {
							childCategoryStr = ''
						}
						this.$set(item, 'childCategory', childCategoryStr)
					}
				}

			},
			addExamSite(row) {
				if (row.id) {
					this.title = '编辑'
					this.examSiteForm = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新建'
					this.examSiteForm = {}
					this.examSiteForm.content = ''
					this.examSiteForm.appid = JSON.parse(localStorage.getItem(
						"appid"))
				}
				this.examSiteVisible = true
				setTimeout(() => {
					this.$refs.cascader.panel.lazyLoad();
				})
			},
			async getMinApp() {
				const res = await this.$get('/admin/minis/getAll')
				this.minAppList = res.data
			},
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						const res = await this.$post('/admin/questionPoints/addQuestionPoints', this
							.examSiteForm)
						this.$message.success('操作成功')
						this.examSiteVisible = false
						this.getData()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handleSizeChange2(val) {
				this.$set(this.pointsCategoryParams, 'pageSize', val);
				this.getPageQueryPointsCategory();
			},
			handleSizeChange3(val) {
				this.$set(this.itemCategoryParams, 'pageSize', val);
				this.getchildPageQueryPointsCategory();
			},
			async getData() {
				const res = await this.$get('/admin/questionPoints/pageQueryQuestionPoints', this.query)
				this.tableData = res.data.list
				this.pageTotal = res.data.totalRow
				this.loading = false
				for (let item of this.tableData) {
					this.$set(item, 'content2', item.content.replace(/<\/?(img)[^>]*>/gi, ''))
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			handleRefresh() {
				this.query = {
					userName: '',
					status: "",
					userId: '',
					startTime: '',
					endTime: '',
					pageNumber: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(async (res) => {
					const result = await this.$postForm('/admin/questionPoints/deleteQuestionPoints', {
						id: row.id
					})
					this.$message.success('删除成功')
					this.getData()
				}).catch(() => {});
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {
				const length = this.multipleSelection.length;
				let str = '';
				this.delList = this.delList.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].id + ',';
				}
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					let vm = this;
					this.$get('/admin/user/deleteUpload?ids=' +
						str).then(function(response) {
						if (response.data.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.$message.success('删除成功');
						vm.getData();
					});

				}).catch(() => {});
			},
			// 审核
			handleSH(index, row) {
				this.idx = index;
				this.form.id = row.id;
				this.form.status = '';
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit() {
				this.editVisible = false;
				let vm = this;
				this.$get('/admin/user/reviewUpload', this.form).then(function(response) {
					if (response.data.code != 1000) {
						vm.$message.error('服务异常');
						return;
					}
					vm.$message.success('审核成功');
					vm.getData();
				});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			},
			handlePageChange2(val) {
				this.$set(this.pointsCategoryParams, 'pageNumber', val);
				this.getPageQueryPointsCategory();
			},
			handlePageChange3(val) {
				this.$set(this.itemCategoryParams, 'pageNumber', val);
				this.getchildPageQueryPointsCategory();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 200px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>